<template>  
  <div>  
    <div class="card-container">  
      <!-- 名称卡片 -->  
      <div class="card">  
        <h3>地点名称</h3>  
        <div v-if="!editing">  
          <input type="text" v-model="editableName" placeholder="输入地点名称">  
          <button @click="saveName" class="btn primary">保存</button>  
        </div>  
        <div v-else>  
          <input type="text" v-model="editableName" placeholder="输入地点名称">  
          <button @click="saveName" class="btn primary">保存修改</button>  
        </div>  
        <p v-if="savedName" class="saved-text">已保存的地点名称：{{ savedName }}</p>  
        <button v-if="!editing && savedName" @click="toggleEdit" class="btn secondary">编辑</button>  
      </div>  
  
      <!-- 日期卡片 -->  
      <div class="card">  
        <h3>选择日期</h3>  
        <label for="date" class="input-time">选择日期</label>  
        <input type="date" id="date" v-model="selectedDate">  
        <button @click="saveDateTime" class="btn primary">保存日期</button>  
        <button @click="resetDateTime" class="btn secondary">重置</button>  
        <p v-if="savedDateTime" class="saved-text">保存的日期: {{ savedDateTime }}</p>  
      </div>  
  
      <!-- 描述卡片 -->  
      <div class="card">  
        <h3>地点描述</h3>  
        <textarea v-model="description" placeholder="输入描述..." class="description-textarea"></textarea>  
        <button @click="saveDescription" class="btn primary">保存描述</button>  
      </div>  
    </div>  
  
    <!-- 保存所有信息按钮 -->  
    <button @click="saveAllInfo" class="btn save-all-btn">保存所有信息</button>  
  
    <!-- 返回总览界面按钮 -->  
    <router-link :to="{ name: 'location' }" class="btn secondary">  
      <i class="el-icon-arrow-left"></i> 返回总览界面  
    </router-link>  
  </div>  
</template>  
  
<script>  
import axios from 'axios';  
  
export default {  
  data() {  
    return {  
      editableName: '',  
      editing: false,  
      savedName: '',  
      selectedDate: '',  
      savedDateTime: '',  
      description: '' // 添加描述的绑定  
    };  
  },  
  methods: {  
    saveName() {  
      if (this.editableName.trim() === '') {  
        alert('请输入地点名称');  
        return;  
      }  
      this.savedName = this.editableName;  
      this.editableName = '';  
      this.editing = false;  
    },  
    toggleEdit() {  
      this.editing = !this.editing;  
      if (this.editing) {  
        this.editableName = this.savedName;  
      }  
    },  
    saveDateTime() {  
      if (!this.selectedDate) {  
        alert('请选择一个日期');  
        return;  
      }  
      this.savedDateTime = this.selectedDate;  
    },  
    resetDateTime() {  
      this.selectedDate = '';  
      this.savedDateTime = '';  
    },  
    saveDescription() {  
      console.log('保存的描述:', this.description); // 打印保存的描述  
      // 此处添加保存描述到服务器的代码  
    },  
    saveAllInfo() {  
      const placeData = {  
        placeName: this.savedName,  
        visitTime: this.savedDateTime,  
        description: this.description  
      };  
      const token = localStorage.getItem('userToken');  
      axios.post('/api/places/add', placeData, {  
        headers: {  
          'Authorization': token  
        }  
      })  
      .then(response => {  
        alert('地点已成功保存!');  
        console.log(response.data);  
        this.$router.push('/location');  
      })  
      .catch(error => {  
        console.error('保存地点失败:', error);  
        alert('保存地点失败，请稍后重试。');  
      });  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* 基本色彩和字体 */  
:root {  
  --primary-color: #4DB6AC; /* 主题色 */  
  --secondary-color: #FFC107; /* 辅助色 */  
  --text-color: #333; /* 文本色 */  
  --background-color: #FFFFFF; /* 背景色 */  
  --btn-background: #FFFFFF; /* 按钮背景色 */  
  --btn-hover-color: #B2DFDB; /* 按钮悬停色 */  
}  
  
body {  
  font-family: 'Arial', sans-serif; /* 使用更现代的字体 */  
  color: var(--text-color);  
  background-color: var(--background-color);  
}  
  
.card-container {  
  display: flex;  
  flex-direction: column;  
  gap: 20px;  
}  
  
.card {  
  padding: 20px;  
  border-radius: 8px;  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
  background-color: #fff;  
}  
  
.card h3 {  
  margin-bottom: 10px;  
  color: var(--primary-color);  
}  
  
.saved-text {  
  margin-top: 10px;  
  color: #777;  
}  
  
input[type="text"], input[type="date"], textarea, .btn {  
  padding: 10px;  
  border-radius: 5px;  
  border: 2px solid var(--primary-color);  
  width: 100%; /* 充满容器宽度 */  
  box-sizing: border-box; /* 边框内计算宽度 */  
}  
  
textarea.description-textarea {  
  height: 150px; /* 调整文本框高度 */  
  resize: vertical; /* 允许垂直调整大小 */  
}  
  
.btn {  
  cursor: pointer;  
  transition: background-color 0.3s;  
}  
  
.btn.primary {  
  background-color: var(--primary-color);  
  color: #fff;  
}  
  
.btn.primary:hover {  
  background-color: var(--btn-hover-color);  
}  
  
.btn.secondary {  
  background-color: #f0f0f0;  
  color: var(--text-color);  
}  
  
.btn.secondary:hover {  
  background-color: #ddd;  
}  
  
.save-all-btn {  
  display: block;  
  width: 100%;  
  background-color: var(--secondary-color);  
  color: #fff;  
  padding: 15px;  
  font-weight: bold;  
}  
  
.save-all-btn:hover {  
  background-color: darken(var(--secondary-color), 10%);  
}  
</style>






